<template>
    <dl class="detail-type">
        <dt @click="isShow = !isShow">
            <span class="tit">开票信息</span>
            <el-button v-if="edit" type="primary" size="mini" @click.stop="choiceCus()" :disabled="loading">填写发票
            </el-button>
        </dt>
        <el-collapse-transition>
            <dd v-show="isShow" v-loading="loading">
                <el-form ref="form" :rules="rules" :model="form" label-width="120px">
                    <el-row>
                        <el-descriptions class="margin-top decs" :column="3" :size="size" border>
                            <el-descriptions-item>
                                <template slot="label">
                                    是否发票
                                </template>
                                <el-col :span="24">
                                    <el-form-item prop="is_invoice">
                                        <span class="p" v-if="form.is_invoice">
                                            {{ selectDictLabel(yesNo, form.is_invoice) }}
                                        </span>
                                    </el-form-item>
                                </el-col>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    发票类型
                                </template>
                                <el-col :span="24">
                                    <el-form-item prop="invoice_type">
                                        <span class="p" v-if="form.invoice_type">
                                            {{ selectDictLabel(typeList, form.invoice_type) }}
                                        </span>
                                    </el-form-item>
                                </el-col>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    税号
                                </template>
                                <el-col :span="24">
                                    <el-form-item prop="invoice_duty">
                                        <span class="p">{{form.invoice_duty}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-row>
                </el-form>
                <el-dialog :modal-append-to-body="false" title="发票信息" visible v-if="detailShow == 'choice'" @close="close()" width="600px" append-to-body
                    :close-on-click-modal="false">
                    <el-form ref="billForm" :model="billForm" :rules="billRules" label-width="80px" v-loading="diaLoading">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="是否开票" prop="is_invoice" label-width="100px">
                                    <el-radio-group v-model="billForm.is_invoice">
                                        <el-radio v-for="dict in yesNo" :key="dict.dictValue" :label="Number(dict.dictValue)">{{ dict.dictLabel }}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="开票类型" prop="invoice_type" label-width="100px">
                                    <el-radio-group v-model="billForm.invoice_type">
                                        <el-radio v-for="dict in typeList" :key="dict.dictValue" :label="Number(dict.dictValue)">{{ dict.dictLabel }}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="税号" prop="invoice_duty">
                                    <el-input style="width:215px;" v-model="billForm.invoice_duty" placeholder="请输入税号" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="close()">取 消</el-button>
                        <el-button type="primary" @click="submit" :disabled="diaLoading">确 定</el-button>
                    </span>
                </el-dialog>
            </dd>
        </el-collapse-transition>
    </dl>
</template>
<script>
import { yesNo } from "@/api/dictionary"
export default {
    name: '',
    props: {
        handleShow: {
            type: String, //add新增edit编辑
            default: ""
        },
        data: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    components: {

    },
    data() {
        return {
            loading: false,
            isShow: true,
            form: {
            },
            billForm: {

            },
            billRules: {
                is_invoice: [{ required: true, message: "请选择是否开票", trigger: "change" }],
                invoice_type: [{ required: true, message: "请选择开票类型", trigger: "change" }],
                invoice_duty: [{ required: true, message: "请选择请输入税号", trigger: "blur" }],
            },
            rules: {
                is_invoice: [{ required: true, message: "请选择是否开票", trigger: "change" }],
                invoice_type: [{ required: true, message: "请选择开票类型", trigger: "change" }],
                invoice_duty: [{ required: true, message: "请选择请输入税号", trigger: "blur" }],
            },
            diaLoading: false,
            detailShow: '',
            pageCount: 0,
            size: 'mini',
            diaLoading: false,
            yesNo: yesNo,
            typeList: [
                { dictValue: 1, dictLabel: "企业增值税发票" },
                { dictValue: 2, dictLabel: "企业增值税专用发票" },
            ],
            edit: this.handleShow == "detail" ? false : true,
        }
    },
    created() {
        if (this.handleShow == "edit" || this.handleShow == "detail") {
            this.form.is_invoice = this.data.is_invoice
            this.form.invoice_type = this.data.invoice_type
            this.form.invoice_duty = this.data.invoice_duty
        }
    },
    methods: {
        choiceCus() {
            this.detailShow = 'choice'
        },
        close() {
            this.billForm = {}
            this.detailShow = ''
        },
        submit() {
            this.$refs.billForm.validate((valid) => {
                if (valid) {
                    this.diaLoading = true;
                    this.form = this.billForm
                    this.diaLoading = false;
                    this.close()
                }
            })
        }
    },
}

</script>
<style scoped lang='scss'>
.decs {
    /deep/.el-descriptions--mini.is-bordered .el-descriptions-item__cell {
        padding: 0 10px;
    }
    /deep/.el-descriptions-item__cell {
        padding: 0;
    }
    /deep/ .el-col {
        margin: 0px;
        padding: 0px;
        height: 30px;
        line-height: 30px;
    }
    /deep/.el-form-item__error {
        top: 21%;
        right: 5% !important;
        left: unset;
    }
}
.p {
    font-size: 12px;
}
</style>